<template>
  <div class="rate_history">
    <div class="rate_historyCards" v-for="(item, index) in historyData" :key="item.id">
      <div class="rate_historyCard">
        <div class="rate_historyCardHeader">
          <div style="height: 100%;display: flex;align-items: center;">
            <div class="rate_icon"></div>
            <div class="rate_text">质检评分</div>
            <div class="rate_textNum"><span>{{ item.score }}</span>/100</div>
          </div>
          <svg-icon :style="!item.open ? 'cursor: pointer;transform: rotate(-90deg)' : 'cursor: pointer'"
            :name="'icon-icon_rote'" @click="expend(item)"></svg-icon>
        </div>
        <div class="rate_historyCardFooter">
          <div style="height: 100%;display: flex;align-items: center;"><svg-icon
              :name="'icon-system_user'"></svg-icon>评分人：{{ item.scorer }}</div>
          <div>{{ dayjs(item['updateTime']).format('YYYY年MM月DD日 HH:mm:ss') }}</div>
        </div>
      </div>
      <div class="rate_historyCards_con" v-if="item.open">
        <template v-if="item.childrens && item.childrens.length > 0">
          <template  v-for="child in item.childrens" :key="child.id">
            <div class="rate_historyCards_conText"><span>{{ child.name }}</span> {{ child.score }}/{{ child.allScore }}</div>
            <template v-if="child.childrens && child.childrens.length > 0">
              <div class="rate_historyCards_conTextItem" v-for="son in child.childrens" :key="son.id">
                <div style="color: rgba(56, 56, 56, 1);">{{ son.name }}<span
                    style="margin-left: 5px;color: rgba(129, 129, 129, 1);">({{ son.allScore }}分)</span></div>
                <div class="rate_historyCards_conTextItemNum"><span>{{ son.score }}</span>分</div>
              </div>
            </template>
          </template>
        </template>
      </div>
    </div>

  </div>
</template>

<script setup>
import {getCurrentInstance, inject, nextTick, onMounted, onUnmounted, reactive, ref, toRaw, watch} from "vue";
import dayjs from 'dayjs'

let historyData = ref([])
const historyInfo  = inject('historyInfo') // 标签信息
if(historyInfo.value) {
  historyData.value = historyInfo.value.map(item => {
    return {
      open: false,
      ...item
    }
  })
}

// 展开/收起事件
const expend = (item) => {
  item.open = !item.open
}

</script>

<style lang="css" scoped>
.svg-icon {
  width: 16px;
  height: 16px;
}

.rate_history {
  width: 100%;
  height: calc(100vh - 410px);
  overflow-y: auto;
}

.rate_historyCard {
  overflow: hidden;
  width: 100%;
  height: 52px;
  border-radius: 6px;
  background: rgba(245, 245, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 8px 4px 8px;
}

.rate_historyCardHeader {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rate_historyCardFooter {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(92, 91, 91, 1);
}

.rate_icon {
  width: 2px;
  height: 11px;
  border-radius: 249px;
  transform: rotate(181.81deg);
  background: rgba(30, 117, 254, 1);
  margin-right: 8px;
}

.rate_text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(56, 56, 56, 1);
  margin-right: 8px;
}

.rate_textNum {
  font-size: 11px;
  font-weight: 400;
  color: rgba(56, 56, 56, 1);
}

.rate_textNum>span {
  color: rgba(30, 117, 254, 1);
}

.rate_historyCards {
  width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 7px;
}

.rate_historyCards_conText {
  width: 100%;
  height: 26px;
  font-size: 11px;
  color: rgba(89, 89, 89, 1);
  font-weight: 400;
  padding-left: 20px;
  display: flex;
  align-items: center;
  background-color: rgba(250, 250, 250, 1);
}

.rate_historyCards_conText>span {
  font-weight: 600;
  margin-right: 5px;
}

.rate_historyCards_conTextItem {
  width: 100%;
  height: 26px;
  font-size: 11px;
  font-weight: 400;
  padding: 0px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rate_historyCards_conTextItemNum {
  font-size: 12px;
  color: rgba(105, 105, 105, 1);
  font-weight: 400;
}

.rate_historyCards_conTextItemNum>span {
  font-weight: 600;
}
</style>
